<template>
  <div>
    <div v-if="data.length>0">
      <div v-for="item in data" :key="item.ip">
        <a :href="'http://monitor.tuhu.cn/history.php?action=showgraph&itemids[]=' + item.itemId" target="_blank">

          <div class="bell-notification-item">
            <el-row type="flex" style="align-items: center">
              <el-col :span="3">
                <svg-icon :icon-class="item.level" style="font-size: 30px"></svg-icon>

              </el-col>
              <el-col :span="21">
                <h2 class="bell-notification-item-content">
                  <p><span>AppID: </span><span>{{ item.cmdbAsset.assetAppidApp }}</span></p>
                  <p><span>实例: </span><span>{{ item.cmdbAsset.hostName }}</span><span>（ {{ item.ip }} ）</span></p>
                  <p><span>信息: </span><span>{{ item.message }}</span></p>
                </h2>
                <div class="bell-notification-item-time"><p>{{ item.alarmedAt }}</p></div>
              </el-col>
            </el-row>
          </div>
        </a>

      </div>
    </div>
    <div v-else style="text-align: center;"> 暂无告警 </div>

  </div>
</template>

<script>
export default {
  name: 'Notification',
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style scoped>

.bell-notification-item {
  padding: 12px 16px;
  border-bottom: 1px solid #e8eaec;
  cursor: pointer;
  text-align: left;
  align-items: center;
}

.bell-notification-item-content {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #515a6e;
}
.bell-notification-item-time {
  font-size: 12px;
  color: #808695;
}

</style>
